在 Day1 大家應該已經明白什麼叫做 CSS 框架了吧？今天，我們會拿目前使用數最高的兩個 CSS 框架做簡單的比較，好跟大家推坑 tailwind。

一、兩大框架的使用概念介紹

• Bootstrap

  Bootstrap 是最廣為人知也是目前使用率最高的 CSS 框架，大家最常使用的原因大概就是因為它的核心理念是基於「元件」所設計；「元件」是什麼意思呢？帶大家看看一個經典的元件：按鈕，在 bootstrap 上是如何呈現的？
  首先，我們先找到 Bootstrap 文件中有關按鈕的部分，並將文件中的 code 經由偉大的 Ctrl+C 和 Ctrl+V 貼到我們的文字編輯器，即可產生如下按鈕。

  <button type="button" class="btn btn-primary">Primary</button>
  

  
  而我們要寫純 CSS 產生一樣按鈕的話，則必須：

  .button-primary{
  padding: 6px 12px;
  margin: 4px 2px;
  background: #0d6efd;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  }
  

  這下子高下立判，Bootstrap 製作一個按鈕只需要複製貼上，而自己寫一樣的按鈕則需手動打上好幾個樣式。
  這！大概就是大家喜歡使用它的原因，好上手且快速，元件的意思就是如此，Bootstrap 幫我們寫好固定樣式的物件就是元件，好比 Day1 形容的滷肉飯便當，它就是給我們一個個配好菜色的便當。讓我們可以直接帶走

• Tailwind

  Tailwind 又是什麼呢？也是元件化框架！對吧？，完全不是哦，Tailwind 是 utility 的概念，可以看作是「工具」型框架，至於什麼是工具呢？帶大家看看 Tailwind 文件中的一小段，以背景顏色為例：
  
  圖片中，bg-blue-100 ~ bg-blue-800，顯示的是背景顏色為藍色且不同色階，而這 100 ~ 800 就可以看作是 Tailwind 幫我們準備了一種帶有不一樣的藍色顏料並且用在 background 上的工具，而我們只要直接拿著這個工具使用就好，帶大家看看使用例子：

<div class="w-20 h-20 m-6 bg-blue-800"></div>

由此即可產生背景顏色為藍色的區塊，直接拿著 tailwind 準備好的工具使用，這便是 utility 導向的框架，以滷肉飯便當來形容，就像個滷肉飯自助餐，我們可以選擇各式各樣做好的菜色妝點我們的滷肉飯，我們不會挑到不想吃的菜色，這就可以讓它成為我們想吃的滷肉飯便當。

二、Bootstrap vs Tailwind

介紹完兩者的概念之後，我們可以來比較看看兩者的差異性：

1. 使用概念
   Bootstrap：component (元件)
   Tailwind：utility (工具)
2. 客製化
   Bootstrap：客製可能性較低且困難
   Tailwind：客製自由度高且容易
3. 視窗切換
   Bootstrap：雖然是複製貼上，但也時不時需要使用 SCSS 或任何預處理器寫上 CSS 樣式；導致開發時會在 HTML 與 CSS 的視窗中切換。
   Tailwind：全部的樣式都寫在 HTML 中，需要自己寫的 CSS 樣式非常少，用習慣之後視窗不太需要切換，長時間待在 HTML 視窗中開發。
4. 設計稿規範
   Bootstrap：若設計稿是遵循 Bootstrap 的樣式或元件作為規範的話，在開發的速度上會非常快。
   Tailwind：因使用者數量還不及 Bootstrap，所以目前拿到的設計稿不太容易是按照 Tailwind 的，這時開發速度就會比前者慢上許多。
   以上四點是筆者使用過兩者後的直接感受，或許有更多，這裡筆者不是要比較兩者的好壞，只是跟大家分享使用上的差異性，幫助新手更好地理解在使用上該如何取捨這兩大框架。
   下一篇將會詳細介紹 Tailwind，請大家敬請期待！